<?php
header('content-type:text/html; charset=utf-8');

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="jQuery/jquery-1.11.1.min.js"></script>
  <script type="text/javascript">
  	$(function(){
		var f = 0;
		var s = 3;
		$('#f').val(f);
		$('#s').val(s);
		$('#beg').click(function(){
            this.value = this.value=="暂停" ? "比一比" : "暂停";
			if(this.value=="暂停"){
				r = setInterval(function(){
					var rand = "";
					for(var i = 0; i < 3; i++){
					    var r = Math.floor(Math.random() * 10);
					
					    rand += r;
					
					}
						$('#ele').val(rand);
						dian = rand;
						console.log(rand);
				},1);
				m = setInterval(function(){
					var ran = "";
					for(var i = 0; i < 3; i++){
					    var m = Math.floor(Math.random() * 10);
					
					    ran += m;
					
					}
						$('#pl').val(ran);
						wan = ran;
						console.log(ran);
				},1);
			} else {
				clearInterval(r);
				clearInterval(m);
				if (dian>wan){
					s-=1;
					alert('你输了　　　生命 -1');
					$('#s').val(s);
				} else {
					n = wan-dian;
					console.log(n);
					f+=n;
					$('#f').val(f);
					alert('你赢了');
				}
			}
		});
		$('#exit').click(function(){
			if (s<3||f>0){
				var name=prompt("人过留名，鸟过留屎。","");//将输入的内容赋给变量 name ，
 
			    //这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值
			 
			    if(name)
			 
			    {
			         $('#e').val(name);
			     }
			} else {
				if(confirm("你确信不玩了？"))
 
				    {
				        location.href="xiao.php";
				     }
			}
		})
		$('#but').css({'width':'100px','height':'40px','color':'#ADADAD','font-size':'25px'});
		$('#ele').css({'width':'160px','height':'185px','font-size':'90px','border-style':'none'});
		$('#pl').css({'width':'160px','height':'180px','font-size':'90px','border-style':'none'});
		$('#f').css({'width':'100px','border-style':'none'});
		$('#s').css({'width':'100px','border-style':'none'});
		$('.tile').css({'text-align':'center'});
		$('.bi').css({'text-align':'center'});
	})
  </script>
 </head>
	<style type="text/css">
		#but{ border:solid 1px #66B3FF; }
		.but{ text-align:center; }
		.bo{ width:700px; height:450px; margin:150px auto; border:solid 10px blue; }
		.row{ width:600px; margin:30px auto; }
		img{ width:300px; }
		.text{ float:right; width:200px; margin:20px auto; }
		.ele{ float:left; width:200px; }
		.player{ float:left; width:200px; }
		.out{ float:left; width:200px; margin:40px auto; }
		.out1{ height:60px; text-align:center; margin:40px auto; }
		.b{ text-align:center;}
		.on{ float:right; }
	</style>
 <body>
 <?php 
 $pdo=new PDO('mysql:dbname=jie;charset=utf8','root');
 $s=$pdo->prepare('select * from hu order by score Desc');
 $s->execute();
 $b=$s->fetchAll(PDO::FETCH_NAMED);
 //var_dump($b);
 ?>
 <?php 
 @$id= $_REQUEST['id'];
 	if (empty($id)){?>
 		<div class="bo">
 		<div class="tile"><h1>比大小游戏</h1></div>
   		<div class="row">
				<img src="img/welcome.png" />
				<div class="text">
					<div class="bi" style="color:#FF9224"><h3>比大小排行</h3></div><br />
					<?php 
					$c = 1;
					for ($a=0;$a<count($b);$a++){
					if ($a<3){?>
						<div id="one">第 <?php echo $c++?> 名：<?php echo $b[$a]['name']?><div class="on"><?php echo $b[$a]['score']?></div></div>
						<br />
					<?php } }?>
					<br />
					<div class="but">
						<a href="xiao.php<?php echo "?id=1"?>"><button id="but">开始</button></a>
					</div>
				</div>
		</div>
		</div>
 	<?php } else {
 		if ($id==1){?>
		<div class="bo">
			<div class="tile"><h1>比大小游戏</h1></div>
			<div class="row">
 			<div class="ele">
 				<fieldset>
 					<legend>电脑</legend>
 					<input id="ele" value="???" />
 				</fieldset>
 			</div>
 			<div class="out">
 					<fieldset>
 						<div class="out1">
 							分数：<input id="f" value="" />
							生命：<input id="s" />
						</div>
 					</fieldset>
 			</div>
			<div class="player">
 				<fieldset>
 					<legend>玩家</legend>
 					<input id="pl" value="???" />
 				</fieldset>
 			</div>
			<div>　</div>
			</div>
			<div class="b">
				<input type="button" value="比一比" id="beg" />　　　
				<button id="exit">不玩了</button>
			</div>
		</div>
 		<?php }?>
 	<?php }?>
</body>
</html>